{extend name="base"/}
{block name="resources"}
<style>
    .modelBox {
        background-color: #f5f5f5;
        padding: 20px;
        padding-bottom: 10px;
        width: 340px;
        box-sizing: box-sizing;
        margin-right: 10px;
    }
    .modelBox .titleA {
        font-weight: 600;
        color: #818181 !important;
        padding-bottom: 10px;
    }
    .newinfo {
        width: 340px;
        display:flex;
        justify-content:space-between;
        align-items:end;
        margin-top: 10px;
    }
    .newinfo .newinfoA {
        color:#837f7b;
        font-size:13px;
        line-height:13px;

    }
    .newinfo .newinfoB {
        font-weight:600;
        font-size:28px;
        color:#262626;
        width: 35%;
        line-height:24px;
        text-align: right;
        margin-top: 4px;
    }
    .newinfoC {
        display:flex;
        width: 35%;
        color:#21201f;
        font-size:13px;
        line-height:13px;
        height: 13px;
        text-align: right;
    }
    .ns-card-common{
        margin-top: 40px;
    }
</style>
{/block}
{block name="main"}
<div>
    <h2 style="padding: 10px;font-weight: 600;color: #333;">平台统计</h2>
</div>

<div class="layui-card ns-survey-info ns-card-common" style="display:flex">
    <div class="modelBox">
        <div class="titleA">余额充值</div>

        <div class="newinfo">
            <span class="newinfoA">充值金额</span>
            <span class="newinfoB">{$today_recharge_order_total}</span>
            <span class="newinfoA" style="margin-left:6px">元</span>
            <div class="newinfoC">
                环比
                {php}
                $t = $today_recharge_order_total;
                $y = $yesterday_recharge_order_total;
                {/php}
                {$t > $y ? '+' : ''}{$recharge_order_total}
                {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
            </div>
        </div>
    </div>

    <div class="modelBox">
        <div class="titleA">余额消费</div>

        <div class="newinfo">
            <span class="newinfoA">消费金额</span>
            <span class="newinfoB">{$today_money}</span>
            <span class="newinfoA" style="margin-left:6px">元</span>
            <div class="newinfoC">
                环比
                {php}
                $t = $today_money;
                $y = $yesterday_money;
                {/php}
                {$t > $y ? '+' : ''}{$balance_money_total}
                {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
            </div>
        </div>
    </div>

    <div class="modelBox">
        <div class="titleA">余额提现</div>

        <div class="newinfo">
            <span class="newinfoA">已提现金额</span>
            <span class="newinfoB">{$today_withdraw}</span>
            <span class="newinfoA" style="margin-left:6px">元</span>
            <div class="newinfoC">
                环比
                {php}
                $t = $today_withdraw;
                $y = $yesterday_withdraw;
                {/php}
                {$t > $y ? '+' : ''}{$withdraw_total}
                {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
            </div>
        </div>
    </div>

    <div class="modelBox">
        <div class="titleA">积分获得</div>

        <div class="newinfo">
            <span class="newinfoA">积分获得</span>
            <span class="newinfoB">{$today_member_point_acquire}</span>
            <span class="newinfoA" style="margin-left:6px">个</span>
            <div class="newinfoC">
                环比
                {php}
                $t = $today_member_point_acquire;
                $y = $yesterday_member_point_acquire;
                {/php}
                {$t > $y ? '+' : ''}{$member_point_acquire_total}
                {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
            </div>
        </div>
    </div>

    <div class="modelBox">
        <div class="titleA">积分消费</div>

        <div class="newinfo">
            <span class="newinfoA">积分消费</span>
            <span class="newinfoB">{$today_member_point_consume}</span>
            <span class="newinfoA" style="margin-left:6px">个</span>
            <div class="newinfoC">
                环比
                {php}
                $t = $today_member_point_consume;
                $y = $yesterday_member_point_consume;
                {/php}
                {$t > $y ? '+' : ''}{$member_point_consume_total}
                {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
            </div>
        </div>
    </div>

</div>

<div class="layui-card ns-card-common ns-card-brief">
    <div class="layui-card-header">
        <span class="ns-card-title">占比</span>

        <div class="ns-card-head-right layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block ns-len-mid">
                    <select name="date" lay-filter="date_member_chart">
                        <!--                        <option value="0">今日实时</option>-->
                        <option value="1">近7天</option>
                        <option value="2">近30天</option>
                    </select>
                </div>
            </div>
            <span class="current-time-member"></span>
        </div>
    </div>
    <div class="layui-card-body">
        <div id="member_main" style="width: 33.3%; height: 400px;float: left;"></div>
        <div id="member_main2" style="width: 33.3%; height: 400px;float: left;"></div>
        <div id="member_main3" style="width: 33.3%; height: 400px;float: left;"></div>
    </div>
</div>
{/block}

{block name="script"}
<script src="ADMIN_JS/echarts.min.js"></script>

<script>
    $(function() {
        getMemberCapitalStatChart(1);
    });

    layui.use(['form'], function(){
        var form = layui.form;

        form.on('select(date_member_chart)', function(data) {
            getMemberCapitalStatChart(data.value);
        });

    })

    //环形图-会员占比
    function getMemberCapitalStatChart(date_type){
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("admin/stat/getMemberCapitalStatList"),
            data: {
                date_type: date_type
            },
            success: function(res){
                $(".current-time-member").html(res.time_range);
                option2.series[0].data = res.member_recharge;
                myChart2.setOption(option2);

                option3.series[0].data = res.member_consume;
                myChart3.setOption(option3);

                option4.series[0].data = res.member_withdraw;
                myChart4.setOption(option4);
            }
        });
    }

    var myChart2 = echarts.init(document.getElementById('member_main'));

    option2 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20%',
            left: 'center'
        },
        title:{
            'text':'余额充值占比',
            'left':'45%',
            'top':'10'
        },
        color:['#44d4c4','#f89c09','#7917fc','#4c75f3'],
        series: [
            {
                name: '余额充值占比',
                type: 'pie',
                radius: ['20%', '40%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [

                ]
            }
        ]
    };

    option2 && myChart2.setOption(option2);

    //环形图-新增会员占比
    var myChart3 = echarts.init(document.getElementById('member_main2'));

    option3 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20%',
            left: 'center'
        },
        title:{
            'text':'会员消费占比',
            'left':'45%',
            'top':'10'
        },
        color:['#44d4c4','#f89c09','#7917fc','#4c75f3'],
        series: [
            {
                name: '会员消费占比',
                type: 'pie',
                radius: ['20%', '40%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [

                ]
            }
        ]
    };

    option3 && myChart3.setOption(option3);

    var myChart4 = echarts.init(document.getElementById('member_main3'));

    option4 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20%',
            left: 'center'
        },
        title:{
            'text':'提现占比',
            'left':'45%',
            'top':'10'
        },
        color:['#44d4c4','#f89c09','#7917fc','#4c75f3'],
        series: [
            {
                name: '提现占比',
                type: 'pie',
                radius: ['20%', '40%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [

                ]
            }
        ]
    };

    option4 && myChart4.setOption(option4);
</script>
{/block}